<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@include file="/WEB-INF/views/common/taglib.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>${title}</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
		<%@include file="/WEB-INF/views/common/js.jsp"%>
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<%--<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">--%>
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<%--<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>--%>
		<%--<script src="http://vjs.zencdn.net/5.17.0/video.js"></script>--%>
		<script src="${ctx}/js/jquery.min.js"></script>
		<link rel="stylesheet" href="${ctx}/css/bootstrap.min.css">
		<script src="${ctx}/js/bootstrap.min.js"></script>
		<script type="text/javascript">
			function OpenModel(case_id){
				$("#casedetail").empty();
//				$("#myModalLabel").empty();
				$("#casedetail").append("<iframe src='${ctx}/case/preCaseDetail?case_id="+case_id+"' id=\"myiframe\" scrolling=\"yes\" frameborder=\"0\" width=\"100%\" height=\"100%\" allowfullsreen=\"true\"></iframe>");
//				$("#myModalLabel").append(casename);
			}
		</script>

		<script type="text/javascript">
			function getCaseById(case_id){
				//清空该列下原有元素
				$("#taboflist"+case_id).empty();
				$.ajax({
					url: '${ctx}/case/getCaseWithID',
					type: 'POST',
					data:{
						case_id:case_id
					},
					dataType: 'json',
					success: function(responseText) {
						for (var i = 0; i < responseText.TotalRecordCount; i++) {
							<%--$("#tabslist").append("<label><input type=\"radio\" id=\"template_type\" name=\"template_type\" value=\""+responseText.Records[i].template_type+"\" onclick=\"templateList()\"/>"+responseText.Records[i].template_type+"</label>");--%>
//							$("#taboflist"+case_id).append("<button type=\"button\" class=\"btn btn-large btn-primary\" onclick=\"openPopbox()\">"+responseText.Records[i].case_name_dis+"</button>");
							$("#taboflist"+case_id).append(
									"<div class=\"col-sm-6 col-md-6 col-lg-3\">"+
//									"<div class='thumbnail' style='height: 70px'>"+
									"<button type=\"button\" class=\"btn btn-shadow\" data-toggle=\"modal\" data-target=\"#myModal\" onclick=\"OpenModel("+responseText.Records[i].caselist_id+")\">"+responseText.Records[i].case_name_dis+"</button>"+
//									"</div>"+
									"</div>");
						}
					}
				});
			}
			</script>
		<script type="text/javascript">
		$(document).ready(function() {
		//加载系统模板
		$.ajax({
		    url: '${ctx}/case/getAll_Main_Case',
		    type: 'POST',
		    data:{
		},
		dataType: 'json',
		success: function(responseText) {

			//循环加载主病例tab栏以及tab下panel
			for (var i = 0; i < responseText.TotalRecordCount; i++) {
				<%--$("#tabslist").append("<label><input type=\"radio\" id=\"template_type\" name=\"template_type\" value=\""+responseText.Records[i].template_type+"\" onclick=\"templateList()\"/>"+responseText.Records[i].template_type+"</label>");--%>

				if (i == 0) {
					$("#tabslist").append("<li class=\"tabBlock-tab is-active\" onclick=\"getCaseById("+responseText.Records[i].main_case_id+")\" >"+responseText.Records[i].main_case_name+"</li>");
				} else {
					$("#tabslist").append("<li class=\"tabBlock-tab\" onclick=\"getCaseById("+responseText.Records[i].main_case_id+")\">"+responseText.Records[i].main_case_name+"</li>");
				}
				//添加tab下的panel
				$("#tabcontent").append(
						"<div class='row'>"+
				"<div class=\"tabBlock-pane\" id=\"taboflist"+responseText.Records[i].main_case_id+"\">\n"+
								"</div>"+
				"</div>");
			}
			//初始化第一个栏的病例
			getCaseById(responseText.Records[0].main_case_id);
		}
		});
		});
		</script>


	<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,300' rel='stylesheet' type='text/css'>

	<link rel="stylesheet" href="${ctx}/css/mainpage/button.css">
	<!-- Animate.css -->
	<link rel="stylesheet" href="${ctx}/css/mainpage/animate.css">
	<!-- Icomoon Icon Fonts-->
	<link rel="stylesheet" href="${ctx}/css/mainpage/icomoon.css">
	<!-- Bootstrap  -->
	<link rel="stylesheet" href="${ctx}/css/mainpage/bootstrap.css">
	<!-- Superfish -->
	<link rel="stylesheet" href="${ctx}/css/mainpage/superfish.css">

	<link rel="stylesheet" href="${ctx}/css/mainpage/style.css">
	<link rel="stylesheet" href="${ctx}/css/tabstyle/style.css">
	<link rel="stylesheet" href="${ctx}/css/popboxstyle/common.css">
	<!-- Modernizr JS -->
	<script src="${ctx}/js/mainpage/modernizr-2.6.2.min.js"></script>
	<script src="${ctx}/js/tabstyle/jquery.js"></script>
	<script src="${ctx}/js/tabstyle/index.js"></script>
	<script src="${ctx}/js/popboxstyle/common.js"></script>
	<!-- FOR IE9 below -->
	<!--[if lt IE 9]>
	<script src="${ctx}/js/mainpage/respond.min.js"></script>

	<![endif]-->

	</head>
	<body>
		<div id="fh5co-wrapper">
		<div id="fh5co-page">
			<div id="fh5co-header">
				<div class="top">
					<div class="container">
						<span> <a href="#"><i>@</i> 关注Santiago新浪微博</a></span>
						<span> <a href="tel://+4008517517"><i class="icon-mobile3"></i> 4008 517 517</a></span>
					</div>
				</div>
				<!-- end:top -->
				<header id="fh5co-header-section">
					<div class="container">
						<div class="nav-header">
							<a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>
							<h1 id="fh5co-logo"><a href="${ctx}/user/AfteruserLogin">圣地亚哥宠物医院</a></h1>
							<!-- START #fh5co-menu-wrap -->
							<nav id="fh5co-menu-wrap" role="navigation">
								<ul class="sf-menu" id="fh5co-primary-menu">
									<li>
										<a href="${ctx}/user/AfteruserLogin">Home</a>
									</li>
									<li>
										<a href="${ctx}/guide/pre3DGuide" class="fh5co-sub-down">3D导览</a>
										<ul class="fh5co-sub-menu">
											<li><a href="${ctx}/guide/pre3DGuide">3D模型导览</a></li>
											<li><a href="${ctx}/guide/preimageGuide">图片导览</a></li>
										</ul>
									</li>
									<li class="active">
										<a href="${ctx}/cosplay/preViewCosplay" class="fh5co-sub-down">职能学习</a>
										<ul class="fh5co-sub-menu">
											<li><a href="${ctx}/cosplay/preViewCosplay">角色扮演</a></li>
											<li><a href="${ctx}/office/preViewOffice">科室详情</a></li>
											<li><a href="${ctx}/case/preViewCase">病例学习</a></li>
										</ul>
									</li>
									<li><a href="${ctx}/user/userLogOut">退出</a></li>
								</ul>
							</nav>
						</div>
					</div>
				</header>

			</div>
		

		<div class="fh5co-hero">
			<div class="fh5co-overlay"></div>
			<div class="fh5co-cover text-center" style="background-image: url(${ctx}/images/mainpage/main.jpg);">
				<div class="desc animate-box">
					<h2>病例目录学习</h2>
					<br/>
					<div class="container">
						<figure class="tabBlock">
							<%--存放tab的标签--%>
							<ul class="tabBlock-tabs" id="tabslist">
							</ul>
								<%--存放tab的panel--%>
								<div class="tabBlock-content" id="tabcontent">
								</div>
						</figure>
					</div>
				</div>
			</div>

		</div>
		<!-- end:header-top -->

			<footer>
				<div id="footer">
					<div class="container">
						<div class="row">
							<div class="col-md-6">
								<p>Copyright C1G19 Santiago Pet Hospital.All RIGHTS RESERVED. <br>Any Question Please contact 4008-517-517</p>
							</div>
							<div class="col-md-6">
								<ul class="footer-menu">
									<li><a href="${ctx}/user/AfteruserLogin">Home</a></li>
									<li><a href="${ctx}/guide/pre3DGuide">3D导览</a></li>
									<li><a href="${ctx}/cosplay/preViewCosplay">职能学习</a></li>
									<li><a href="${ctx}/user/userLogOut">退出</a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</footer>
	</div>

			<!-- Modal模态框，用以加载病例详细信息 -->
			<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog modal-lg" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="myModalLabel">病例详情</h4>
						</div>
						<div class="modal-body" id="casedetail">
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
						</div>
					</div>
				</div>
			</div>
	<!-- END fh5co-page -->

	</div>
	<!-- END fh5co-wrapper -->
		<script>
			$(function () { $('#myModal').on('hide.bs.modal', function () {
				//停止播放器
				$("#casedetail").empty();
			})
			});
		</script>

	<!-- jQuery -->
	<script src="${ctx}/js/mainpage/jquery.min.js"></script>
	<!-- jQuery Easing -->
	<script src="${ctx}/js/mainpage/jquery.easing.1.3.js"></script>
	<!-- Bootstrap -->
	<script src="${ctx}/js/mainpage/bootstrap.min.js"></script>
	<!-- Waypoints -->
	<script src="${ctx}/js/mainpage/jquery.waypoints.min.js"></script>
	<!-- Superfish -->
	<script src="${ctx}/js/mainpage/hoverIntent.js"></script>
	<script src="${ctx}/js/mainpage/superfish.js"></script>

	<!-- Main JS (Do not remove) -->
	<script src="${ctx}/js/mainpage/main.js"></script>

	</body>
</html>

